<template>
  <div v-if="baseValues.pymsm === '01'||baseValues.pymsm === '03'">
    <a-table
      rowKey="index"
      :columns="columns"
      :dataSource="tableData"
      :pagination="false"
    >
      <template v-for="col in keyData" :slot="col.key" slot-scope="text, record, index">
        <a-select
          v-if="col.key === 'mlxkdm' && record.editable"
          v-model="tableData[index][col.key]"
          :key="col.key"
          style="width: 100%"
          showSearch
          :filterOption="filterOption"
          allowClear
          labelInValue
          @change="e => handleChange(e, col.key, index)"
        >
          <a-select-option v-for="i in selectMenu[col.keySource]" :key="i.id" :value="i[col.valueKey]">{{ i.xkdm ? `${i.xkdm}-` : '' }}  {{ i[col.valueName] }}</a-select-option>
        </a-select>

        <a-select
          v-model="tableData[index][col.key]"
          v-else-if="col.key === 'yjxkdm' && record.editable"
          mode="multiple"
          :key="col.key"
          style="width: 100%"
          showSearch
          :filterOption="filterOption"
          allowClear
          labelInValue
        >
          <a-select-option v-for="i in selectMenu[col.keySource]" :key="i.id" :value="i[col.valueKey]">{{ i.xkdm ? `${i.xkdm}-` : '' }}  {{ i[col.valueName] }}</a-select-option>
        </a-select>
        <template v-else-if="col.key === 'mlxkdm'">{{ record.mlxkdm.label }}</template>
        <template v-else-if="col.key === 'yjxkdm'" v-for="r in record.yjxkdm">{{ r.label + ',' }}</template>
      </template>
      <template slot="operation" slot-scope="text, record, index">
        <a v-if="record.editable" @click="completeAdd(index)">完成</a>
        <a v-else @click="useEdit(index)">编辑</a>
        <a-popconfirm title="是否要删除此行？" @confirm="remove(index)">
          <a>删除</a>
        </a-popconfirm>
      </template>
    </a-table>
    <a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" icon="plus" @click="newRow">新增行</a-button>
  </div>
  <div v-else>
<!--    <a-select
      v-model="lyxkdm"
      mode="multiple"
      :key="col.key"
      style="width: 100%"
      showSearch
      :filterOption="filterOption"
      allowClear
      labelInValue
    >
      <a-select-option v-for="i in selectMenu[col.keySource]" :key="i.id" :value="i[col.valueKey]">{{ i.xkdm ? `${i.xkdm}-` : '' }}  {{ i[col.valueName] }}</a-select-option>
    </a-select>-->
    <a-form-item label='选择领域'>
      <a-select
        v-model="lyxkdm"
        mode="multiple"
        :allowClear="true"
        style="width: 100%"
        showSearch :filterOption="filterOption">
        <a-select-option v-for="i in selectMenu.subjectList" :key="i.id" :value="i.xkdm">{{i.xkdm + ' ' + i.xkmc}}</a-select-option>
      </a-select>
    </a-form-item>
  </div>
</template>

<script>
import { STable } from '~'

export default {
  props: ['baseValues'],
  components: {
    STable
  },
  data () {
    return {
      lyxkdm:[],
      pyfambfwList: [],
      tableData: [],
      keyData: [
        {
          key: 'mlxkdm',
          keySource: 'subjectList',
          valueKey: 'xkdm',
          valueName: 'xkmc'
        },
        {
          key: 'yjxkdm',
          keySource: 'subSubjectList',
          valueKey: 'xkdm',
          valueName: 'xkmc'
        }
      ],
      columns: [
        {
          title: '门类',
          dataIndex: 'mlxkdm',
          scopedSlots: { customRender: 'mlxkdm' },
          width:160
        },
        {
          title: '一级学科',
          dataIndex: 'yjxkdm',
          scopedSlots: { customRender: 'yjxkdm' },
          width:200
        },
        {
          title: '操作',
          key: 'operation',
          scopedSlots: { customRender: 'operation' },
          width:100
        }],
      selectMenu: {
        subjectList: [],
        subSubjectList: [],
        // TYPE0075: []
      }
    }
  },
  // watch: {
  //   baseValues: {
  //     handler(val, oldValue) {
  //       if (val.pymsm === '01') { // 学术学位
  //         this.columns = [
  //
  //         ]
  //         this.keyData =
  //       } else {
  //         this.columns = [ // 专业学位
  //           {
  //             title: '领域',
  //             dataIndex: 'lyxkdm',
  //             scopedSlots: { customRender: 'lyxkdm' },
  //             width:200
  //           },
  //           {
  //             title: '操作',
  //             key: 'operation',
  //             scopedSlots: { customRender: 'operation' },
  //             width:100
  //           }
  //         ]
  //         this.keyData = [
  //           {
  //             key: 'lyxkdm',
  //             keySource: 'subjectList',
  //             valueKey: 'xkdm',
  //             valueName: 'xkmc'
  //           }
  //         ]
  //       }
  //     },
  //     deep: true,
  //     immediate: true
  //   }
  // },
  created () {
    // this.$store.dispatch('app/setDictionary', 'TYPE0075').then(res => {
    //   this.selectMenu.TYPE0075 = res
    // })
    // this.$store.dispatch('app/setDictionary', 'TYPE0503').then(res => {
    //   this.selectMenu.TYPE0503 = res
    // })
    // this.$api.student.studentResume(this.info.xh).then(res => {
    //   this.tableData = res.data.map(item => {
    //     return Object.assign(item, {editable: false})
    //   })
    // })

  },
  methods: {
    initSubjectList() {
      this.$api.base.subjectAll({xklb: ((this.baseValues.pymsm === '01' || this.baseValues.pymsm === '03') ? '01' : '04')}).then(res => {
        console.log("this.baseValues", this.baseValues)
        console.log("this.tableData", this.tableData)
        // if (this.baseValues.pymsm !== '01' && this.pyfambfwList.length) {
        // try {
        //   let xks = this.pyfambfwList[0].xkmc.split(',')
        //   console.log(xks)
        //   // let xkmc = xks.split(' ')[1]
        //   // console.log(xks)
        //   // console.log(xkdm)
        //   // console.log(xkmc)
        //   let arr = xks.map((xk)=>{
        //     return {
          //       xkdm: xk.split(' ')[0],
          //       xkmc: xk.split(' ')[1]
          //     }
          //   })
          //   console.log(arr)
          //   res.data.push(...arr)
          // } catch (error) {
          //   console.log(error)
          // }
        // }
        this.$set(this.selectMenu, 'subjectList', res.data)
      })
    },
    newRow () {
      let hasEdit = this.tableData.find(d => {
        return d.editable
      })
      if (hasEdit) {
        return this.$message.warning('请先完成前面的添加')
      }
      // if(this.tableData && this.tableData.length > 0 && this.selectMenu.subjectList && this.selectMenu.subjectList.length > 0){
      //   console.dir('tableData:')
      //   console.dir(this.tableData)
      //   console.dir('subjectList:')
      //   console.dir(this.selectMenu.subjectList)
      //   let i = 0;
      //   let length = this.selectMenu.subjectList.length
      //
      //   let ti = 0;
      //   let tlength = this.tableData.length
      //   for(i; i < length; i++){
      //     const ml = this.selectMenu.subjectList[i]
      //     for(ti; ti < tlength; ti++){
      //       const v = this.tableData[ti]
      //       if(ml.xkdm === v.mlxkdm.key){
      //         this.selectMenu.subjectList.splice(i, 1)
      //       }
      //     }
      //   }
      // }
      this.tableData.push({
        mlxkdm: '',
        yjxkdm: [],
        // xslb: '',
        // xslx: '',
        operation: '',
        editable: true
      })
    },

    remove (index) {
      // this.selectMenu.subjectList.push(this.tableData[index])
      this.tableData.splice(index, 1)
    },
    useEdit (index) {
      let hasEdit = this.tableData.some(d => d.editable)
      if (!hasEdit) {
        this.$set(this.tableData[index], 'editable', true)
        this.$api.base.subjectAll({fjxkdm: this.tableData[index].mlxkdm.key,xklb: ('02')}).then(res => {
            this.selectMenu.subSubjectList = res.data
          })
      } else {
        this.$message.error('请先完成其他的编辑')
      }
    },
    completeAdd (index) {
      // this.$parent
      let data = this.tableData[index]
      if (this.baseValues.pymsm === '01' || this.baseValues.pymsm === '03') { // 学术学位
        if (data.mlxkdm && data.yjxkdm && data.yjxkdm.length > 0) {
          // if (this.baseValues.pyfamb) {
          //   this.baseValues.xslx = this.baseValues.pyfamb.xslx
          //   this.baseValues.pymsm = this.baseValues.pyfamb.pymsm
          // }
          let yjxkdm = data.yjxkdm
          // console.dir(yjxkdm)
          // this.$api.cultivate.checkTemplateFw(Object.assign(this.baseValues, {
          //   mlxkdm: data.mlxkdm,
          //   yjxkdm: data.yjxkm ? '02' : '01',
          //   xslb: this.baseValues.xslb,
          //   xslx: this.baseValues.xslx,
          // })).then(res => {
          //   if (res.data) {
          //     this.$message.error('该范围已添加过了')
          //     return this.tableData.splice(index, 1)
          //   }
          // })
          data.editable = false

          return
        }
      }else {

      }
      this.$message.error('请选择完整的范围信息')
    },
    handleChange (value, key, index) {
      if(!value){
        return
      }
      // if (key === 'mlxkdm' && this.baseValues.pymsm === '01') {
      let checkRepeat = this.tableData.slice()
      checkRepeat.splice(index, 1)
      let has = checkRepeat.findIndex((v) => {
        return v.mlxkdm.key === value.key;
      })

      if(has !== -1){
        this.selectMenu.subSubjectList = []
        this.$message.error('该门类范围已选')
      } else {
        this.tableData[index]['yjxkdm'] = []
        if (value.key) {
          this.$api.base.subjectAll({fjxkdm: value.key,xklb: ('02')}).then(res => {
            this.selectMenu.subSubjectList = res.data
          })
        } else {
          this.selectMenu.subSubjectList = []
        }
      }
    },
    // handleChangeYjxk (value, key, index) {
    //   if(!value){
    //     return
    //   }
    //   // console.dir(this.tableData)
    //   // this.tableData[index][key].push({value});
    // },
    filterOption (value, options) {
      return options.componentOptions.children[0].text.indexOf(value) !== -1
    }
  }
}
</script>

<style>

</style>
